<template>
    <div class="myCommodity">
      <header class="header">
        <h1 class="title">个人中心</h1>
        <div class="login">
          <div class="log-btn" @click="login">登录/注册</div>
        </div>
        <nav class="nav">
          <div class="nav__item">
            <h2>0</h2>
            <span>我的关注</span>
          </div>
          <div class="nav__item">
            <h2>0</h2>
            <span>签到礼金</span>
          </div>
          <div class="nav__item">
            <h2>0</h2>
            <span>优惠券</span>
          </div>
        </nav>
      </header>
      <!-- 主体-->
      <div class="container">
        <!-- 订单 -->
        <div class="orderForm">
          <div class="orderForm__item" @click="dfk">
            <img src="./image/155745620576685615.png" alt="#">
            <span>待付款</span>
          </div>
          <div class="orderForm__item" @click="dsh">
            <img src="./image/155745620576685615.png" alt="#">
            <span>待收货</span>
          </div>
          <div class="orderForm__item" @click="dpj">
            <img src="./image/155745620576685615.png" alt="#">
            <span>待评价</span>
          </div>
          <div class="orderForm__item" @click="qbdd">
            <img src="./image/155745620576685615.png" alt="#">
            <span>全部订单</span>
          </div>
        </div>
        <!-- 优惠 -->
        <div class="discounts orderForm">
          <div class="orderForm__item">
            <img src="./image/155745620576685615.png" alt="#">
            <span>砍价团</span>
          </div>
          <div class="orderForm__item">
            <img src="./image/155745620576685615.png" alt="#">
            <span>新人红包</span>
          </div>
          <div class="orderForm__item">
            <img src="./image/155745620576685615.png" alt="#">
            <span>1元邀新</span>
          </div>
          <div class="orderForm__item">
            <img src="./image/155745620576685615.png" alt="#">
            <span>收货地址</span>
          </div>
        </div>
        <!-- 猜你喜欢 -->
        <div>猜你喜欢</div>
        <!-- 推荐商品 -->
        <div class="recommend">
          <div class="recommend__item">
            <div class="recommend__item--img">
              <img src="./image/155745620576685615.png" alt="#">
              <span class="referrer">两人团·已拼1.7万件</span>
            </div>
            <h2 class="title">
              【拼品牌】太太乐 软毛扫把簸箕套装扫地苕...
            </h2>
            <div class="prices">
              <div class="price">
                <span>￥16.9</span>
                <del>￥29.9</del>
              </div>
              <div class="">拼</div>
            </div>
          </div>
          <div class="recommend__item">
            <div class="recommend__item--img">
              <img src="./image/155745620576685615.png" alt="#">
              <span class="referrer">两人团·已拼1.7万件</span>
            </div>
            <h2 class="title">
              【拼品牌】太太乐 软毛扫把簸箕套装扫地苕...
            </h2>
            <div class="prices">
              <div class="price">
                <span>￥16.9</span>
                <del>￥29.9</del>
              </div>
              <div class="">拼</div>
            </div>
          </div>
          <div class="recommend__item">
            <div class="recommend__item--img">
              <img src="./image/155745620576685615.png" alt="#">
              <span class="referrer">两人团·已拼1.7万件</span>
            </div>
            <h2 class="title">
              【拼品牌】太太乐 软毛扫把簸箕套装扫地苕...
            </h2>
            <div class="prices">
              <div class="price">
                <span>￥16.9</span>
                <del>￥29.9</del>
              </div>
              <div class="">拼</div>
            </div>
          </div>
          <div class="recommend__item">
            <div class="recommend__item--img">
              <img src="./image/155745620576685615.png" alt="#">
              <span class="referrer">两人团·已拼1.7万件</span>
            </div>
            <h2 class="title">
              【拼品牌】太太乐 软毛扫把簸箕套装扫地苕...
            </h2>
            <div class="prices">
              <div class="price">
                <span>￥16.9</span>
                <del>￥29.9</del>
              </div>
              <div class="">拼</div>
            </div>
          </div>
          <div class="recommend__item">
            <div class="recommend__item--img">
             <img src="./image/155745620576685615.png" alt="#">
              <span class="referrer">两人团·已拼1.7万件</span>
            </div>
            <h2 class="title">
              【拼品牌】太太乐 软毛扫把簸箕套装扫地苕...
            </h2>
            <div class="prices">
              <div class="price">
                <span>￥16.9</span>
                <del>￥29.9</del>
              </div>
              <div class="">拼</div>
            </div>
          </div>
          <div class="recommend__item">
            <div class="recommend__item--img">
             <img src="./image/155745620576685615.png" alt="#">
              <span class="referrer">两人团·已拼1.7万件</span>
            </div>
            <h2 class="title">
              【拼品牌】太太乐 软毛扫把簸箕套装扫地苕...
            </h2>
            <div class="prices">
              <div class="price">
                <span>￥16.9</span>
                <del>￥29.9</del>
              </div>
              <div class="">拼</div>
            </div>
          </div>
        </div>
      </div>

    </div>
</template>

<script>
export default {
  name: 'myCommodity',
  data() {
    return {
      hotDetails: '',
    };
  },
  methods: {
    login() {
      this.$router.push('/login');
    },
    back() {
      this.$router.push('/index/hot');
    },
    dfk() {
      this.Index = 1;
      this.$router.push({ path: '/order/obligation', query: { Index: 1 } });
    },
    dsh() {
      this.Index = 2;
      this.$router.push({ path: '/order/TobeDelivered', query: { Index: 2 } });
    },
    dpj() {
      this.Index = 3;
      this.$router.push({ path: '/order/TobeEvaluated', query: { Index: 3 } });
    },
    qbdd() {
      this.Index = 0;
      this.$router.push({ path: '/order/whole', query: { Index: 0 } });
    },
  },
  created() {
    // eslint-disable-next-line no-underscore-dangle
    this.$http._commodity()
      .then((res) => {
        this.hotDetails = res.data.num;
      });
  },
};
</script>

<style scoped lang="scss">
  .myCommodity{
    user-select: none;
    overflow-x: hidden;
  }
.header{
  position: relative;
  background-color: #eb4f3f;
  font-size: 34px;
  width: 100vw;
  height: 546px;
  color: #fff;
  padding: 0 40px;
  .title{
    margin: 0;
    text-align: center;
    font-size: 58px;
    line-height: 140px;
  }
  .login{
    display: flex;
    align-items: center;
    height: 240px;
    img{
      width: 180px;
      height: 180px;
      background-color: #8a6de9;
      border-radius: 50%;
    }
    .log-btn{
      margin-left: 80px;
      width: 260px;
      padding: 8px 0;
      text-align: center;
      line-height: 70px;
      border: 1px solid #fff;
      border-radius: 70px;
    }
  }
  .nav{
    display: flex;
    background-color: #fff;
    border-radius: 36px;
    font-size: 40px;
    width: 1162px;
    height: 214px;
    position: absolute;
    bottom: -106px;
    .nav__item{
      flex: 1;
      text-align: center;
      padding: 43px 0;
      box-sizing: border-box;
      color: #666;
      h2{
        color: #000;
        margin: 0 0 25px;
        font-size: 48px;
      }
    }
  }
}
.container{
  padding: 106px 40px 185px;
  box-sizing: border-box;
  background-color: #f2f2f2;
  .orderForm{
    margin-top: 40px;
    display: flex;
    padding: 43px;
    border-radius: 32px;
    background-color: #fff;
    font-size: 38px;
    color: #666;
    .orderForm__item{
      flex: 1;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      img{
        width: 88px;
        height: 88px;
        object-fit: contain;
        background-color: #666666;
      }
      span{
        width: 100%;
        text-align: center;
        margin-top: 38px;
      }
    }
  }
  .discounts{
    padding: 30px;
    .orderForm__item img{
      width: 100px;
      height: 100px;
    }
  }
  .recommend{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .recommend__item{
      width: 48%;
      background-color: #fff;
      border-radius: 30px;
      padding: 30px 40px;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 2%;
      .recommend__item--img{
        display: flex;
        flex: 1;
        position: relative;
        img{
          flex: 1;
          height: 491px;
          background-color: #ccc;
        }
        .referrer{
          position: absolute;
          line-height: 58px;
          width: 355px;
          background-color: #c39490;
          font-size: 34px;
          padding: 5px 0;
          box-sizing: border-box;
          color: #fff;
          left: 0;
          right: 0;
          bottom: -33px;
        }
      }
      .title{
        margin: 56px 0 0;
        font-size: 44px;
      }
      .prices{
        flex: 1;
        margin-top: 54px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .price{
          flex: 1;
          font-size: 42px;
          color: #ec675b;
          del{
            color: #ccc;
          }
        }
        div:last-child{
          background-color:#ec675b;
          padding: 12px;
          color: #fff;
          border-radius: 15px;
        }
      }
    }
  }
}

</style>
